<template>
    <li class="item">
        <div class="card">
            <div class="imgCard">
                <img :src="require(`../../assets/img/${item.name}.jpg`)" alt="">
                <div class="mask">
                    <h1>
                        {{ item.name }}
                    </h1>
                    <h2>
                        {{ item.festival }}
                    </h2>
                </div>
            </div>
            <div class="content">
                <h1>
                    {{ item.desc || '无说明' }}
                </h1>
                <h2>
                    {{ item.rest || '无说明' }}
                </h2>
            </div>
        </div>
    </li>
</template>

<script>
export default {
    props: {
        item: {
            type: Object,
            default: {}
        }
    }
}
</script>

<style lang="less" scoped>
   .item {
        padding:.1rem .15rem;
        box-sizing: border-box;
       .card {            
            border: 1px solid #ddd;
            border-radius:.15rem;
            overflow: hidden;
            background: #fff;
            // 阴影
            box-shadow: .01rem .03rem .05rem #999;
            .imgCard{
                position: relative;
                height: 2.15rem;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover; // 图片自适应  不裁剪
                }
               .mask {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.5);
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    h1 {
                        color: #ed4040;
                        font-size:.5rem;
                        font-weight: bold;
                    }
                    h2 {
                        color: #fff;
                        margin-top: 0.15rem;
                    }
                }
            }
           .content {
                padding:.15rem;
                box-sizing: border-box;
                color: #333;
                line-height: .2rem;
                h1 {
                    font-size:.16rem;
                }
                h2 {
                    font-size:.14rem;
                    margin-top: 0.1rem;
                }
            }
       }
    }
</style>